/*
  学习目标：props的基本使用
  步骤：
     1. props是什么: 标签身上的所有属性, 组成的一个对象
     2. 写法: 字符串可以省略插值符号{}, 非字符串, 统一放在插值符号{}
     3. 如何获取props
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Header name="zs" age={18} list={[1, 2, 3]} />
        <Footer name="ls" age={3} />
      </div>
    );
  }
}

// 3.1 函数式组件, 通过形参获取props
// 👍推荐解构props
function Header({ name, age }) {
  return (
    <h1>
      Header - {name} - {age}
    </h1>
  );
}

// 3.2 类组件, 通过this.props获取props
class Footer extends React.Component {
  render() {
    // 👍推荐解构props
    const { name, age } = this.props;
    return (
      <div>
        Footer - {name} - {age}
      </div>
    );
  }
}
